﻿<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
			 x:Class="WpfApplication1.PathAnimationExample">
	<UserControl.Resources>
		<PathGeometry x:Key="OrbitGeometry"
					  Figures="M385,-107.6665 C385,-79.77612 295.68081,-57.1665 185.5,-57.1665 C75.319192,-57.1665 -14,-79.77612 -14,-107.6665 C-14,-135.55688 75.319192,-158.1665 185.5,-158.1665 C295.68081,-158.1665 385,-135.55688 385,-107.6665 z" />
		<Storyboard x:Key="EarthAroundSunAnimation"
					RepeatBehavior="Forever">
			<DoubleAnimationUsingPath BeginTime="00:00:00"
									  Duration="00:00:02"
									  Storyboard.TargetName="Earth"
									  Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
									  Source="X"
									  PathGeometry="{StaticResource OrbitGeometry}" />
			<DoubleAnimationUsingPath BeginTime="00:00:00"
									  Duration="00:00:02"
									  Storyboard.TargetName="Earth"
									  Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
									  Source="Y"
									  PathGeometry="{StaticResource OrbitGeometry}" />
		</Storyboard>
	</UserControl.Resources>
	<UserControl.Triggers>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<BeginStoryboard Storyboard="{StaticResource EarthAroundSunAnimation}"
							 x:Name="EarthAroundSunAnimation_BeginStoryboard" />
		</EventTrigger>
	</UserControl.Triggers>

	<Canvas x:Name="LayoutRoot">
		<Path Fill="#FFFFFFFF"
			  Stretch="Fill"
			  Stroke="#FF000000"
			  Width="400"
			  Height="102"
			  Canvas.Left="30"
			  Canvas.Top="164"
			  Data="{StaticResource OrbitGeometry}" />
		<Ellipse Stroke="#FF000000"
				 x:Name="Earth"
				 Width="29"
				 Height="27.333"
				 RenderTransformOrigin="0.5,0.5"
				 Canvas.Left="30"
				 Canvas.Top="309">
			<Ellipse.RenderTransform>
				<TranslateTransform X="0"
									Y="0" />
			</Ellipse.RenderTransform>
			<Ellipse.Fill>
				<RadialGradientBrush>
					<GradientStop Color="#FF5C6DBF"
								  Offset="0" />
					<GradientStop Color="#FF213BB3"
								  Offset="1" />
					<GradientStop Color="#FF32B52F"
								  Offset="0.152" />
				</RadialGradientBrush>
			</Ellipse.Fill>
		</Ellipse>
		<Ellipse Stroke="#FF000000"
				 x:Name="Sun"
				 Width="95"
				 Height="95"
				 Canvas.Left="186"
				 Canvas.Top="134">
			<Ellipse.Fill>
				<RadialGradientBrush>
					<GradientStop Color="#FFF51212"
								  Offset="0" />
					<GradientStop Color="#FFE45808"
								  Offset="1" />
				</RadialGradientBrush>
			</Ellipse.Fill>
		</Ellipse>
	</Canvas>
</UserControl>